<template>
	<view class="app" v-bind:style="{height:appHeight+'px'}">
		<view class="header">
			<view class="header-c">
				<view class="flex-item">
					<u-avatar :src="src" mode="circle" size="large"></u-avatar>
				</view>
				<view class="flex-item n-a">
					<view class="nickname" @click="openSetNickname">
						{{nickname}}
					</view>
					<view class="autograph">
						{{autograph}}
					</view>
				</view>
			</view>
		</view>

		<view class="group-list">
			<u-cell-group>
				<u-cell-item icon="account" title="个人信息"></u-cell-item>
				<u-cell-item icon="integral-fill" title="会员等级"></u-cell-item>
				<u-cell-item icon="setting" title="应用设置"></u-cell-item>
				<u-cell-item icon="question-circle-fill" title="关于" value="有新版本"></u-cell-item>
			</u-cell-group>
		</view>
		<u-divider style="margin-top: 20rpx;background-color: #ededed;">空山新雨后，天气晚来秋~</u-divider>

		<!-- 模态框 -->
		<!-- 修改昵称 -->
		<u-modal v-model="nicknameShow" title="修改昵称" @confirm="nicknameConfirm" ref="uModal" :async-close="true"
			:show-cancel-button="true">
			<view style="width: 80%;margin-left: 10%;">
				<u-form-item label="昵称">
					<u-input v-model="updateNickname" type="text" maxlength="12" input-align="center" :border="true" placeholder="请输入昵称" />
				</u-form-item>
				<!-- <u-input v-model="nickname" type="text" border="true" /> -->
			</view>
		</u-modal>

		<!-- top-tips  -->
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appHeight: 600,
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				nicknameShow: false,
				nickname: '绫小路清隆',
				autograph: '啥也没留下~',
				updateNickname: ''
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.updateNickname = this.nickname
				this.appHeight = uni.getSystemInfoSync().windowHeight
			},
			openSetNickname() {
				this.nicknameShow = true
			},
			nicknameConfirm() {
				setTimeout(() => {
					// 3秒后自动关闭
					this.nicknameShow = false;
					this.nickname = this.updateNickname
					// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
					// this.$refs.uModal.clearLoading();
					this.$refs.uTips.show({
						title: '修改成功~',
						type: 'success',
						duration: '1600'
					})
				}, 3000)
			}


		}
	}
</script>

<style>
	.app {
		overflow: hidden;
		background-color: #ededed;
		width: 100%;
	}

	.header {
		padding-top: 60rpx;
		background-color: #FFFFFF;
		padding-bottom: 18rpx;
	}

	.header-c {
		display: flex;
		margin-left: 15%;
	}

	.flex-item {
		flex-direction: column;
	}

	.n-a {
		margin-top: 5px;
		margin-left: 33rpx;
	}

	.nickname {
		font-size: 38rpx;
		min-width: 300rpx;
		min-height: 38rpx;
	}

	.autograph {
		margin-top: 18rpx;
		font-size: 18rpx;
	}

	.group-list {
		margin-top: 30rpx;
	}
</style>
